<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        控制显示与否的是 v-show 绑定的变量，而不是操作 DOM 元素
        <div id="step1" v-show="flag1">
            <input placeholder="请输入手机号">
            <button @click="commitPhoneNum">提交手机号</button>
        </div>
        <div id="step2" v-show="flag2">
            <input placeholder="输入验证码">
            <button @click="getNum">获取验证码</button>
        </div>

        <div id="step3" v-show="flag3">
            <input placeholder="设置密码">
            <button @click="stepOK">完成</button>
        </div>

        <p v-show="flag4">OK</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag1: true,
                flag2: false,
                flag3: false,
                flag4: false
            },
            methods: {
                commitPhoneNum() {
                    this.flag2 = true;
                    this.flag1 = false;
                },
                getNum() {
                    this.flag3 = true;
                    this.flag2 = false;
                },
                stepOK() {
                    this.flag4 = true;
                    this.flag3 = false;
                }
            },
        })
    </script>
</body>

</html>